

import React, { Component } from 'react';
import {
  AppRegistry,
  StyleSheet,
  Text,
  TextInput,
  Platform,
  TouchableOpacity,
  View,
  Image,
  ScrollView
} from 'react-native';
import Head from './head.js';
import ImagePicker from './imagePicker.js';
import MapModal from './modalMap.js';
import {MapView, MapTypes, MapModule, Geolocation} from 'react-native-baidu-map';
var Dimensions = require('Dimensions');
var ScreenWidth = Dimensions.get('window').width;
var ScreenHeight = Dimensions.get('window').height;
let _this;
let path1,path2;
let TestInfo = [{'customer_id':'1234',longitude: 118.777287,'latitude': 32.060663,
                  'customer_name':'张大杰','customer_address':'江苏省南京市建邺区河西大街金融城3号楼','mobile_phone':''}]
export default class VisitCustDetail extends Component {
  constructor(props) {
    super(props);
    _this = this;

    this.state={
      SendInfo:this.props.SendInfo,
      acant1:"",
      acant2:"",
      mapType: MapTypes.NORMAL,
      zoom: 15,
      center: {
          longitude: 118.738408,
          latitude: 32.018975
      },
      trafficEnabled: false,
      baiduHeatMapEnabled: false,
      markers: [{
                      longitude: 118.738408,
                      latitude: 32.018975,
                      title: ""
                  }],
      MapView: <View></View>,
      customerInfo : TestInfo,
      customerInfoIndex:0,


    }

    // console.warn(JSON.stringify(this.state.result))
  }



    openBaiduMapDirection(){
        let origin = this.state.center;
        let destination = this.state.customerInfo[this.state.customerInfoIndex];
        let url = baidumap.getOpenBaidumapDirectionUrl(origin, destination);
        // console.warn('url>>>>'+url)
        Linking.canOpenURL(url).then(supported => {
            if (!supported) {
                // console.warn('Can\'t handle url: ' + url);
            } else {
                return Linking.openURL(url).catch(err => {});
            }
        }).catch(err => {
            Toast.show("请安装百度地图", {duration: Toast.durations.SHORT, position: Toast.positions.CENTER});
        });
    }

  _Preservation(){
    storage.remove({
    key: String(this.state.SendInfo.card)
    });
    storage.save({
        key: String(this.state.SendInfo.card + 'visit'),
        rawData: { 
            PersonalInfo: this.state.SendInfo,
        },
        // 如果不指定过期时间，则会使用defaultExpires参数
        // 如果设为null，则永不过期
        expires: null
    })

    // TestItems.push(this.state.SendInfo)

    const { navigator } = this.props;
    if(navigator) {
        navigator.pop();
    }
  }
  
  render() {
    return (
      
    <View style={styles.container}>
          <View style={styles.title}>
              <Head displayLeft={true}  _onLeftPress={()=>this.props.navigator.pop()} title='调查详情'></Head>
          </View>
                <ScrollView>
                  <View style={styles.detailStyle}>
                      <Text style={styles.inputTextStyle}>客户姓名：</Text>
                      <Text style={styles.inputTextStyle}>{this.state.SendInfo.name}</Text>
                  </View>
                  <View style={styles.detailStyle}>
                      <Text style={styles.inputTextStyle}>身份证号：</Text>
                      <Text style={styles.inputTextStyle}>{this.state.SendInfo.card}</Text>
                  </View>
                  <View style={styles.detailStyle}>
                      <Text style={styles.inputTextStyle}>调查地址：</Text>
                      <Text style={styles.inputTextStyle}>{this.state.SendInfo.location}</Text>
                  </View>
                        {Platform.OS=='ios'?<MapView 
                                                trafficEnabled={this.state.trafficEnabled}
                                                baiduHeatMapEnabled={this.state.baiduHeatMapEnabled}
                                                zoom={this.state.zoom}
                                                mapType={this.state.mapType}
                                                center={this.state.center}
                                                // marker={this.state.marker}
                                                markers={this.state.markers}
                                                style={styles.map}
                                                childrenPoints={[[10, 10]]}
                                                onMapClick={(e) => { 
                                                }}
                                                onMarkerClick={(e)=>{
                                                this.refs.mapLocation.showModal();
                                                }}
                                                onMapPoiClick={(e)=>{
                                                    //点击地图上带有文字的地名或者商店
                                                }}
                                                onMapStatusChange={()=>{
                                                    //地图开始改变的时候   如双击的时候 地图放大 移动 改变了
                                                }}

                                                onMapLoaded={()=>{
                                                    //刚刚加载的时候
                                                }}
                                                ></MapView>:<View></View>
                        }
                    

                  <View style={{width:ScreenWidth - 20,marginRight:10,marginLeft:10,marginTop:10}}>
                      <View style={{justifyContent:'center'}}>
                          <Text style={[styles.inputTextStyle,{marginBottom:10}]}>照片:</Text>
                      </View>
                      <ImagePicker 
                        ref="ImagePickerOne"
                        style={{height: ScreenHeight / 2, width:ScreenWidth - 20,}}
                        defaultStyle={{height:100,width:100,marginLeft:(ScreenWidth-140)/2}}
                        IsetState = {() =>{ this.refs.ImagePickerOne.IsetStateFun()}}
                        IonImage= {() =>{ this.refs.ImagePickerOne.onImage()}}
                      />
                      <View style={[styles.Bottomline,{marginLeft:0,marginBottom:10}]}></View>
                      <ImagePicker 
                        ref="ImagePickerTwo"
                        style={{height: ScreenHeight / 2, width:ScreenWidth - 20,}}
                        defaultStyle={{height:100,width:100,marginLeft:(ScreenWidth-140)/2}}
                        IsetState = {() =>{ this.refs.ImagePickerTwo.IsetStateFun(); }}
                        IonImage= {() =>{ this.refs.ImagePickerTwo.onImage()}}
                      />
                  </View>
                    
                  <TouchableOpacity onPress={() => {this._Preservation()}}>
                      <View style={styles.queryStyle}>
                        <Text style={{color:'#ffffff',fontSize:16}}>保存</Text>
                      </View>
                  </TouchableOpacity>
               </ScrollView>


               <View>
            
            <MapModal ref="mapLocation"   animationType="fade">
                        <View style={styles.mapModals}>
                            <View style={styles.ListTypeTwo} >
                                    <View style = {{flexDirection:'row',alignItems:'center',flex:1,height:50,borderColor:'#ccc',borderRightWidth:1}}>
                                        <Image
                                            style={styles.icon}
                                            source={require('../images/personal.png')}
                                        />
                                        <Text style = {{fontSize:16}}>{this.state.customerInfo[this.state.customerInfoIndex].customer_name}</Text>
                                    </View>

                                    {this.state.mobilePhone}
                                
                            </View>
                        </View> 
                    
                        <View style={styles.mapModals}>
                            <TouchableOpacity onPress={this.openBaiduMapDirection.bind(this)} style={styles.ListType} >
                                    <Image
                                        style={styles.icon}
                                        source={require('../images/location.png')}
                                    />
                                    <Text style = {{width: Dimensions.get('window').width-45,fontSize:16}}>{this.state.customerInfo[this.state.customerInfoIndex].customer_address}</Text>
                            </TouchableOpacity>
                        </View>
            </MapModal>
            </View>
          </View>
    );
  }
}


const styles = StyleSheet.create({
  container: {
    flex: 1,
  },
  title: {
    height:60,
  },
  mapModals:{
        flex:1,
        flexDirection:'row',
        height:50,
        borderBottomWidth:1,
        borderColor:'#ccc',
  },
  ListTypeTwo:{
      flexDirection:'row',
      alignItems: 'center',
      justifyContent:'space-between',
      flex:1
  },
  ListType:{
      flexDirection:'row',
      alignItems: 'center',
      justifyContent:'flex-start',
  },
  icon: {
        width: 25,
        height: 25,
        marginLeft:10,
        marginRight:10
    },
  toBaiduNavigator: {
    flexDirection: 'row',
    justifyContent: 'center', 
    alignItems: 'center', 
    padding: 6,
    backgroundColor: '#12b7f5',
    // borderRadius: 5,
    borderBottomLeftRadius: 10,
  },
  aTextInput: {
    justifyContent:'center',
    flex:1,
    paddingTop:3,
  },
  TextInput: {
    width: 240,
    height: 30,
    marginTop: 10,
    borderRadius: 5,
  },
  imageStyle: {
    flexDirection: 'row',
    marginTop: 50,
    alignSelf: 'center',
    justifyContent: 'center',
    alignItems: 'center',
  },
  image:{
    marginLeft: 30,
    marginRight: 30
  },
  InputRoot:{
    flexDirection:'row',
    marginLeft:20,
    height:50,
  },
  Bottomline:{
    height:0,
    borderBottomWidth: 1,
    borderColor: '#CCCCCC',
    width:ScreenWidth-40,
    marginLeft:20,
  },
  saveButtonStyle:{
    justifyContent:"center",
    alignItems:"center",
    marginTop:20, 
    marginBottom:70,
    marginLeft:ScreenWidth/4,
    marginRight:ScreenWidth/4,
    height:50,
    backgroundColor:"#12b7f5",
    borderRadius:5,
  },
  inputTextStyle: {
    fontSize: 16,
    color:'#666666'
  },
  detailStyle:{
    flexDirection: 'row',
    borderColor:'#ccc',
    borderBottomWidth:1,
    height:45,
    alignItems:'center',
    marginRight:10,
    marginLeft:10
  },
  queryStyle: {
    width: ScreenWidth - 20,
    height: 35,
    backgroundColor: '#12b7f5',
    borderRadius: 5,
    marginTop: 10,
    alignSelf: 'stretch',
    justifyContent: 'center',
    alignItems: 'center',
    marginLeft:10,
    marginBottom:10
  },
  map: {
    width: ScreenWidth - 20,
    height: ScreenWidth - 160,
    alignItems: 'flex-end',
    marginTop: 10,
    borderRadius: 5,
    borderBottomWidth:1,
    borderColor: 'red',
    marginLeft:10,
  },
 
});
